<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Runface动态精准护肤</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/registLogin/util.css"/>
		<link rel="stylesheet" href="css/loaders.css">
		<link rel="stylesheet" href="css/mui.css">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="font_icon/iconfont.css"/>
		
		<style>
			html,
			body {background-color: #efeff4;}
			span.mui-icon {font-size: 14px;/*color: #007aff; margin-left: -15px; */padding-right: 10px;}
			.mui-off-canvas-left {color: #fff;}
			.title {margin: 35px 15px 10px;}
			.title+.content {margin: 10px 15px 35px;color: #bbb;text-indent: 1em;font-size: 14px;line-height: 24px;}
			input {color: #000;}
			.mui-bar{background-color: #ff8dae;}
			.mui-off-canvas-left, .mui-off-canvas-right{background: #FFFFFF;}
			.mui-table-view-inverted{background: #ffffff;}
			.mui-table-view-inverted .mui-table-view-cell:after{background-color: #a4b9fa;}
			.mui-table-view-inverted:before{background-color: #FFFFFF;}
			.mui-table-view-inverted:after{background-color: #FFFFFF;}
			.mui-table-view-cell{padding: 13px 15px;color: #595555;}
			.aye{color:#70b2f9;}
			.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable{background-color: #FFFFFF;}
			/* .mui-card{border-radius: 20px;} */
			/*.mui-scroll-wrapper{position: static;}
			.mui-scroll{position: static;}*/
			.mui-bar.mui-bar-tab{
				background-color: #ff8dae;
			}
			.mui-bar.mui-bar-tab .mui-tab-item.mui-active{
				color: #FFFFFF;
			}
			
			
			
		</style>
	</head>

	<body>
		
		<!-- preloader -->
		<div class="parent">
			<div class="preloader">
				<div class="spinner"></div>
			</div>
		</div>
		<!-- end preloader -->
		
		<!-- 主界面菜单同时移动 -->
			<!-- 侧滑导航根容器 -->
			<div class="mui-off-canvas-wrap mui-draggable ">
				<!-- 主页面容器 -->
				<div class="mui-inner-wrap">
					
					<!-- 主页面标题 -->
					<header class="mui-bar mui-bar-nav">
						<a class="mui-icon mui-action-menu iconfont icon-renshuicon mui-pull-left" href="#offCanvasSide" style="color: #FFFFFF;" id="bars-bars"></a>
						<a class="mui-icon mui-action-menu iconfont icon-gouwuche mui-pull-right" href="#offCanvasSideCart" style="margin-right: 5px;padding-right: 2px;color: #FFFFFF;"><span class="mui-badge mui-badge-danger" style="margin-top: 5px;" id="cartCount">3</span></a>
						<a class="mui-icon mui-action-menu iconfont icon-search mui-pull-right" href="#offCanvasSideSearch" style="margin-right: 0.5rem;color: #FFFFFF;"></a>
						<h1 class="mui-title" style="color: #FFFFFF;">Runface</h1>
					</header>
					<nav class="mui-bar mui-bar-tab">
						<a class="mui-tab-item mui-active">
							<span class="mui-icon mui-icon-home-filled"></span>
							<span class="mui-tab-label">主页</span>
						</a>
						<a class="mui-tab-item">
							<span class="mui-icon iconfont icon-icon2"></span>
							<span class="mui-tab-label">发现</span>
						</a>
						<a class="mui-tab-item">
							<span class="mui-icon iconfont icon-paizhao"></span>
							<span class="mui-tab-label">测一测</span>
						</a>
						<a class="mui-tab-item">
							<span class="mui-icon iconfont icon-dingzhi"></span>
							<span class="mui-tab-label">定制</span>
						</a>
						<a class="mui-tab-item">
							<span class="mui-icon iconfont icon-wode"></span>
							<span class="mui-tab-label">我的</span>
						</a>
					</nav>
				
				</div>
			</div>

		<!-- 脚本 -->
		<script src="js/mui.js"></script>
		<script src="js/app.js"></script>
		<script src="js/template-web.js"></script>
		<script src="font_icon/iconfont.js"></script>
		<script type="text/javascript">
			// 清除spinner
			var preloader=document.querySelector(".preloader");
			var parent=document.querySelector(".parent");
			parent.removeChild(preloader);
		</script>
		<script>
			var menu = null,
				main = null;
			var showMenu = false;
			mui.init();
 
  
		mui.plusReady(function(){
			main = plus.webview.currentWebview();
			//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
			setTimeout(function() {
				menu = mui.preload({
					id: 'index-menu',
					url: 'index-menu.html',
					styles: {
						left: 0,
						width: '70%',
						zindex: -1
					},
					show: {
						aniShow: 'none'
					}
				});
				menu.setStyle({
					mask: 'rgba(0,0,0,0)'
				});
			}, 200);
			
						
		});
		var isInTransition = false;
		/**
		 * 显示侧滑菜单
		 */
		function openMenu() {
			if(isInTransition) {
				return;
			}
			if(!showMenu) {
				//侧滑菜单处于隐藏状态，则立即显示出来；
				isInTransition = true;
				menu.setStyle({
					mask: 'rgba(0,0,0,0)'
				}); //menu设置透明遮罩防止点击
				menu.show('none', 0, function() {
					//主窗体开始侧滑并显示遮罩
					main.setStyle({
						mask: 'rgba(0,0,0,0.4)',
						left: '70%',
						transition: {
							duration: 150
						}
					});
					mui.later(function() {
						isInTransition = false;
						menu.setStyle({
							mask: "none"
						}); //移除menu的mask
					}, 160);
					showMenu = true;
				});
			}
		};
		/**
		 * 关闭菜单
		 */
		function closeMenu() {
			if(isInTransition) {
				return;
			}
			if(showMenu) {
				//关闭遮罩；
				//主窗体开始侧滑；
				isInTransition = true;
				main.setStyle({
					mask: 'none',
					left: '0',
					transition: {
						duration: 200
					}
				});
				showMenu = false;
				//等动画结束后，隐藏菜单webview，节省资源；
				mui.later(function() {
					isInTransition = false;
					menu.hide();
				}, 300);
			}
		};
		//点击左上角侧滑图标，打开侧滑菜单；
		document.querySelector('#bars-bars').addEventListener('tap', function(e) {
			if(showMenu) {
				closeMenu();
			} else {
				openMenu();
			}
		});
		//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
		window.addEventListener("swiperight", openMenu);
		//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
		window.addEventListener("swipeleft", closeMenu);
		//侧滑菜单触发关闭菜单命令
		window.addEventListener("menu:close", closeMenu);
		window.addEventListener("menu:open", openMenu);
		
		</script>
		
		
	</body>

</html>
